<template>
  <div class="dc-page-design-l-field">
    <div class="dc-page-design-l-field-h">
      <el-input v-model="filterText" placeholder="输入关键字进行过滤"
                size="small" clearable @input="inputFilter"
      />
    </div>
    <!-- 组件树 -->
    <el-tree ref="refCompsTree"
             :data="treeList"
             :props="treeProps"
             :filter-node-method="filterLeftCom"
    >
      <template #default="{ data }">
        <div v-if="data.leader">
          <svg-icon icon-class="component" />
          {{ data.name }}
        </div>
        <div v-else class="components-item">
          <svg-icon icon-class="component" />
          {{ data.__config__.label }}
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const filterText = ref('')
const refCompsTree = ref(null)
const treeList = ref([
  {
    name: '表单字段',
    leader: true,
    children: []
  }
])

const treeProps = {
  children: 'list',
  label: 'name'
}

const inputFilter = (v) => {
  refCompsTree.value.filter(v)
}

const filterLeftCom = (value, data) => {
  if (!value) return true
  if (!data || !data.__config__) {
    return false
  }
  value = value.toUpperCase()
  if (data.__config__.key && data.__config__.key.toUpperCase().includes(value)) {
    return true
  }
  if (data.__config__.label && data.__config__.label.toUpperCase().includes(value)) {
    return true
  }
  return false
}
</script>

<style lang='scss' scoped>
</style>
